<template>
    <CommonDetail title="余额信息" :noback="true">
        <el-row class="head">
            <el-col :span="12">
                <div class="wrapper">
                    <div class="label">
                        可用余额
                    </div>
                    <div class="value withdrawal-wrapper" style="background-color: #67C23A;">
                        ￥{{ userAccount ? userAccount.balance : 0 }}
                        <el-button class="withdrawal" type="danger" size="mini">
                            提现
                        </el-button>
                    </div>
                </div>

            </el-col>
            <el-col :span="12">
                <div class="wrapper">
                    <div class="label">
                        不可用余额
                    </div>
                    <div class="value" style="background-color:#E6A23C;">
                        ￥{{ userAccount ? userAccount.unBalance : 0 }}
                    </div>
                </div>

            </el-col>
        </el-row>
        <!-- <el-row class="table-container">
            <div class="platform-bill__top">
                <div class="platform-bill__title">
                    提现记录
                </div>
            </div>
            <div class="search_wrap">
                <el-form :model="filters" ref="searchForm" :inline="true">
                    <el-form-item prop="cashOutState">
                        <el-select v-model="filters.cashOutState">
                            <el-option v-for="item in CashOutStateList" :label="item.name" :value="item.id" :key="item.id">

                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button icon="el-icon-search" type="primary" @click="onSearch">查询</el-button>
                        <el-button icon="el-icon-refresh-left" @click="resetForm">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="opration_wrap">
					<el-tooltip content="刷新" placement="top">
						<el-button circle icon="el-icon-refresh-right" @click="reload" size="mini"></el-button>
					</el-tooltip>

				</div>
            <el-table element-loading-text="数据加载中，请稍后..." empty-text="对不起，没有找到相关数据" :fit="true" highlight-current-row
                v-loading="listLoading" :data="list"
                :header-cell-style="{ 'background-color': '#F2F2F2', 'color': 'black' }">
                <el-table-column label="序号" type="index" align="center">

                </el-table-column>

                <el-table-column label="金额" prop="amount" align="center">

                </el-table-column>
                <el-table-column label="转账状态" prop="type" align="center">
                    <template slot-scope="scope">
                        <el-tag :type="formatCashOutStates(scope.row.cashOutState)" effect="dark" size="small">
                            {{ formatCashOutState(scope.row.cashOutState) }}
                        </el-tag>


                    </template>
                </el-table-column>

                <el-table-column label="内容" prop="content" align="center">

                </el-table-column>
                <el-table-column label="商户批次单号" prop="outBatchNo" align="center">

                </el-table-column>
                <el-table-column label="创建时间" prop="createDate" align="center">

                </el-table-column>
            </el-table>
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="page.pageNo" :page-sizes="[20, 50, 100]" :page-size="page.pageSize"
                layout="total, sizes, jumper, next, pager, prev" :total="page.pageTotal"></el-pagination>
        </el-row> -->
    </CommonDetail>
</template>

<script>
import UserAccountApi from "@/api/finance/userAccount"
export default {
    name: 'UserAccountManagement',
	inject: ['reload'], //注入局部刷新
    data() {
        return {
            userAccount: null,
            list: [

            ],
            CashOutStateList: [
                { id: 1, name: "转帐中" },
                { id: 15, name: "微信SYSTEM_ERROR" },
                { id: 19, name: "转账成功" },
                { id: 20, name: "转账失败" }
            ],
            filters: {
                cashOutState: "",
            },
            page: {
                pageNo: 1,
                pageTotal: 0,
                pageSize: 20,
            },
            listLoading:false,
        }
    },
    mounted() {
        UserAccountApi.getUserAccount().then(res => {
            this.userAccount = res.data
        })
        // this.listData()
    },
    activated() {
        // this.listData()
    },
    methods: {
        formatCashOutState(val) {
            switch (val) {
                case 1:
                    return "转账中"
                case 15:
                    return "微信SYSTEM_ERROR"
                case 19:
                    return "转账成功"
                case 20:
                    return "转账失败"

            }
        },
        formatCashOutStates(val) {
            switch (val) {
                case 1:
                    return ""
                case 15:
                    return "warning"
                case 19:
                    return "success"
                case 20:
                    return "danger"

            }
        },
        handleSizeChange(size) {
            this.page.pageSize = size
            this.listData()
        },
        handleCurrentChange(val) {
            this.page.pageNo = val
            this.listData()
        },
        resetForm() {
            this.$refs.searchForm.resetFields();
        },
        onSearch() {
            this.page.pageNo = 1;
            this.listData();
        },
        listData() {
            let params = {
                pageNo: this.page.pageNo,
                pageSize: this.page.pageSize,
                cashOutState: this.filters.cashOutState
            }
            this.listLoading = true
            UserAccountApi.listCashOut(params).then(res => {
                this.list = res.data.list
                this.page.pageTotal = res.data.total
                this.listLoading = false
                console.log(this.list)
            })
        },
    },
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/views/table.scss";
</style>
<style lang="scss" scoped>
.head {
    font-size: 20px;

    .wrapper {
        display: flex;
        line-height: 60px;
        padding: 10px 0;
        font-weight: 900;

        .label {
            width: 130px;
        }

        .value {
            width: 200px;
            text-align: center;
            border-radius: 7px;
            font-size: 25px;
            color: white;
        }

        .withdrawal-wrapper {
            position: relative;

            .withdrawal {
                position: absolute;
                right: -62px;
                bottom: 0;

            }
        }
    }
}

.platform-bill__top {
    display: flex;
    justify-content: space-between;
    padding: 30px 0 10px 0;

    .platform-bill__title {
        font-size: 14px;
        font-weight: 800;

    }
}
</style>
